<template>
  <div class="banner" ref="view">
    <!-- 左侧模块 -->
    <div class="user" v-show="isShow">
      <!-- 用户栏 -->
      <div class='username'>
        <div class="user_pic" @mouseout="changeShow2()" @mouseover="changeShow1()" @click="turnToAdmin" >
          <img src="../assets/11.png" alt="" class="img1" v-show="!pic_show" >
          <img src="../assets/00.png" alt="" class="img0" v-show="pic_show" >
        </div>
        <div class="admin">
          <span>饲养员：{{name}}</span><br>
          <span>{{centence}}</span>
        </div>
      </div>
      <!-- 文章标签栏 -->
      <div class="label">
        <span class="tag">文章分类</span>
        <ul class="sortUl">
            <li v-for="(s,index) in sortList" :key="index"  @click="turnToSearchSort(s)"><i class="iconfont icon-24gl-tags3"></i>{{s}}</li>
          </ul>
      </div>
      <!-- 推荐栏目 -->
      <div class="recommen">
        <span class="rec">推荐</span>
        <!-- 音乐栏目 -->
        <div class="music">
                <span class="sp1">音乐:</span>
                <span class="sp2">戒网</span>
                <span class="sp3">典狱司</span>
                <span class="sp4">不染</span>
                <span class="sp5">无脚鸟</span>
                <span class="sp6">Lemon</span>
                </div>
                <!-- 游戏栏目 -->
                <div class="game">
                    <span class="sp7">游戏:</span>
                    <span class="sp8">CS:GO</span>
                    <span class="sp9">战地1</span>
                    <span class="sp10">巫师3</span>
                    <span class="sp11">怪物'猎'人</span>
                </div>
                <!-- 电影推荐 -->
                <div class="movie">
                  <span class="sp12">电影:</span>
                  <span class="sp13">我和我的祖国</span>
                  <span class="sp14">误杀</span>
                  <span class="sp15">肖申克的救赎</span>
                  <span class="sp16">贝克街的亡灵</span>
                </div>
        <!--  -->
      </div>
    </div>
    <!-- 文章s -->
    <div class="article">
      <ul class=".artul">
        <li v-for="b in blogList" :key="b.id">
          <!-- 圈圈 -->
          <span><i class="iconfont icon-weixuanzhongyuanquan iconn"></i></span>
          <span class="title" @click="turnToArticle(b)">{{b.title}}</span>
          <div class="blogBody" @click="turnToArticle(b)">{{b.summary}}</div>
          <!-- <article class="blogBody">{{b.summary}}</article>  -->
          <span class="dibu">
            <!-- 作者 -->
            <span class="author"><i class="iconfont icon-denglu-copy"></i>小狼</span>
            <!-- 发布时间 -->
            <span class="time"><i class="iconfont icon-shizhong"></i>{{b.time}}</span>
            <!-- 分类 -->
            <span class="sort" @click="turnToSearchSort(b.sort)"><i class="iconfont icon-24gl-tags3"></i>{{b.sort}}</span>
          </span>
        </li> 
      </ul>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapState} from 'vuex'

export default {
    name:'banner',
    data(){
      return {
        isShow:'',
        name:'爱学习的小狼',
        centence:'褪去一身洒脱 不过是天涯倦客 饮尽悲欢无人与说',
        pic_show:true
      }
    },
    methods:{
      changeShow(){
        let scrollTop = window.pageYOffset 
        if(scrollTop > 0.92 * document.documentElement.clientHeight-1 ){
          this.isShow = false
        }
        if(scrollTop <= 0.92 * document.documentElement.clientHeight-1){
          this.isShow = true
        }
      },
      changeShow1(){
        this.pic_show=false
      },
      changeShow2(){
        this.pic_show = true
      },
      turnToAdmin(){
        this.$router.push({
          path:'/admin',
        })
      },
      // 根据id获取博客
      turnToArticle(b){
        let blog = b
        this.$router.push({
          path:'/article',
          query:{
            blog:blog
          }
        })
      },
      turnToSearchSort(s){
        this.$store.dispatch('searchSort',s)
        this.$router.push({
          path:'/search'
        })
      }
    },
    mounted(){
      window.addEventListener('scroll',this.changeShow)
      this.$refs.view.width = document.documentElement.clientWidth;
    },
    computed:{
      ...mapState(['blogList','sortList']),
    }
}
</script>

<style scoped>
  .banner {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    width: 100%;
    background-color:transparent;
    border: 1px solid white;
    border: none;
    font-family: "NLXJ-BODY";
  }
  .user {
    background-color: rgba(255,255,255,0.9);
        height: 100%;
        width: 20%;
        position: fixed;
        top: 0%;
        left: 10%;
        z-index: 99;
        font-size: 15px;
        color:rgb(190, 139, 156) ;
  }
  .username {
        position: absolute;
        left: 0;
        top: 0;
        height: 31%;
        width: 100%;
    }
  .label {
        position: absolute;
        left: 0;
        top: 31%;
        height: 30%;
        width: 100%;
        border-top: 1px gray solid;
  }
  .tag {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
    height: 10%;
    width: 100%;
  }
 .recommen{
  position: absolute;
  top: 61%;
  height: 31%;
  width: 100%;
  border-top: 1px gray solid;
 }
  .article {
     width: 50%;
     height: 100%;
     background-color: white;
     position: absolute;
     left: 30%;
     top: 0; 
     font-size: 16px;
      color: black;
  }
  .user_pic {
      position: absolute;
      left: 50%;
      top: 10%;
      transform: translate(-50%);
      width: 30%;
      height: 40%;
      border:1px solid gray;
      z-index: 1;
      border-radius: 49%;
      overflow: hidden;
      cursor: pointer;
  }
  .img1 {
      width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
  }
  .img0 {
        width:100%;
        height:100%;
        position:absolute;
        top:0;
        left:0;
        margin-top: 1px;
    }
  .admin {
    width: 100%;
    height: 30%;
    text-align: center;
    position: absolute;
    top: 60%;
  }
  .admin span {
    display: inline-block;
    padding:5px;
  }
  ul{
      background-color: white;
      width: 100%;
}
  ul li {
      position: relative;
      left: 50%;
      transform: translate(-50%);
      height: 150px;
      width: 80%;
      border-bottom: 1px solid gray;
    }
  .title{
      display: inline-block;
      position: absolute;
      left: 1%;
      top: 20%;
      font-size: 20px;
      cursor: pointer;
    }
  .blogBody{
      position: absolute;
      left: 2%;
      top: 45%;
      width: 100%;
      height: 40px;
      text-align: left; 
      cursor: pointer;
      word-wrap:break-word;
      overflow:hidden; 
      text-overflow:ellipsis;
    }
    .title:hover {
      color: rgb(26, 179, 239);
    }
    .blogBody:hover {
      color: rgb(26, 179, 239);
    }
  .dibu {
      position: absolute;
      top: 80%;
      left: 0;
      width: 100%;
      height: 20%;
      text-align: center;
    font-family: "NLXJ-BODY";
  }
  .author{
      position:absolute;
      top: 0%;
      left: 1%;
      font-family: "NLXJ-BODY";
  }
    .time{
      position:absolute;
      top: 0%;
      left: 12%;
      font-family: "NLXJ-BODY";
    }
    .sort{
      position:absolute;
      top: 0%;
      left: 27%;
      font-family: "NLXJ-BODY";
      cursor: pointer;
    }
  .iconn {
    position: absolute;
    top: 22%;
    left: -4%;
    transform: translate(-50%);
  }
  .sort:hover {
    color:rgb(26, 179, 239)
  }
  .rec {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%);
  }
  .music {
    position: relative;
    top: 20%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp1 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp2 {
    position: absolute;
    top: 20%;
    left: 18%;
}
.sp3 {
    position: absolute;
    top: 20%;
    left: 29%; 
}
.sp4 {
    position: absolute;
    top: 20%;
    left: 45%;
}
.sp5 {
    position: absolute;
    top: 20%;
    left: 56%;
}
.sp6 {
    position: absolute;
    top: 20%;
    left: 72%;
}
.sp2,.sp3,.sp4,.sp5,.sp6 {
    cursor: pointer;
}
.sp2:hover,.sp3:hover,.sp4:hover,.sp5:hover,.sp6:hover {
    color: rgb(26, 179, 239);
}
.game {
    position: absolute;
    top: 40%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp7 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp8 {
    position: absolute;
    top: 20%;
    left: 18%;
}
.sp9 {
    position: absolute;
    top: 20%;
    left: 32%; 
}
.sp10 {
    position: absolute;
    top: 20%;
    left: 45%;
}
.sp11 {
    position: absolute;
    top: 20%;
    left: 60%;
}
.sp8,.sp9,.sp10,.sp11 {
    cursor: pointer;
}
.sp8:hover,.sp9:hover,.sp10:hover,.sp11:hover {
    color: rgb(26, 179, 239);
}
.movie {
  position: absolute;
    top: 60%;
    left: 0%;
    width: 100%;
    height: 20%;
}
.sp12 {
    position: absolute;
    top: 20%;
    left: 5%;
}
.sp13{
    position: absolute;
    top: 20%;
    left: 17%;
}
.sp14 {
    position: absolute;
    top: 20%;
    left: 46%; 
}
.sp15 {
    position: absolute;
    top: 20%;
    left: 57%;
}
.sp16 {
    position: absolute;
    top: 50%;
    left: 17%;
}
.sp13,.sp14,.sp15,.sp16 {
    cursor: pointer;
}
.sp13:hover,.sp14:hover,.sp15:hover,.sp16:hover {
    color: rgb(26, 179, 239);
}
.label .sortUl{
  background-color: transparent;
  position: absolute;
  top: 15%;
  left: 0;
  width: 100%;
  height: 85%;
}
.label .sortUl li{
  position: relative;
  left: 50%; 
  transform: translate(-50%);
  height: 25px;
  width: 100%;
  border-bottom: none;
  cursor: pointer;
}
.sortUl li:hover {
    color:rgb(26, 179, 239);

}
</style>